<template>
  <div id="assetsMarkThree">
        <h3>证件影像信息</h3>
      <el-form label-width="100px" ref="UploadInfo" :inline="true" :model="DataUploadInfo">
          <el-form-item :label="item.name" v-for="(item, index) in assetsMarkThreeForm" :key="index" class="form-item-po" :required="item.must === 1">
              <form class="input-file-box" method="post" enctype="multipart/form-data">
                  <input type='file' @change="pushImg($event, index)" ref="input" class="file-input" accept="image/gif,image/jpeg,image/png,image/jpg">
                  <img :src="item.url" class="avatar" ref="img" :alt="'+'">
              </form>
          </el-form-item>
          <br>
          <el-form-item class="btn-box">
              <el-button type="primary" @click="back()" class="el-button-back">上一步</el-button>
              <el-button type="primary" @click="subCreateLoan">提&nbsp;&nbsp;&nbsp;交</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>

<script>
    import { getLoanProjectInfo, createLoanProject } from "@/api/api";
    export default {
        name: "assetsMarkThree",
        data () {
            return {
                DataUploadInfo: {
                    imageUrl: ""
                },
                assetsMarkThreeForm: [
                    {
                        name: '身份证正面',
                        url: ''
                    },
                    {
                        name: '身份证反面',
                        url: ''
                    },
                    {
                        name: '车辆登记证',
                        url: ''
                    },
                    {
                        name: '车辆行驶证',
                        url: ''
                    },
                    {
                        name: '借据',
                        url: ''
                    },
                    {
                        name: '付款凭证',
                        url: ''
                    },
                    {
                        name: '借款合同',
                        url: ''
                    },
                    {
                        name: '抵押合同',
                        url: ''
                    },
                    {
                        name: '其它资料',
                        url: ''
                    }
                ],
                createLoan: {},
                fileList: {
                    idCardOne: "",
                    idCardTwo: "",
                    carRegister: "",
                    carDriving: "",
                    IOU: "",
                    payment: "",
                    loan: "",
                    mortgage: "",
                    other: ""
                }
            };
        },
        watch: {
            $route (to, from) {
                if(to.name === "assetsMarkThree") {
                    this.LoanProject();
                }
            }
        },
        mounted () {
            this.$nextTick(() => {
                this.LoanProject();
            });
        },
        methods: {
            back () {
                this.$router.go(-1);
            },
            pushImg(e, i) {
                let file = e.target.files[0];
                let reader = new FileReader();
                let vm = this;
                reader.readAsDataURL(file);
                let isLt1M = file.size < 1024 * 1024 * 2;
                if (!isLt1M) {
                    this.$message.error("图片大小在2M以内");
                } else {
                    reader.onload = function(e) {
                        vm.assetsMarkThreeForm[i].url = e.target.result;
                    };
                };
            },
            async LoanProject () {
                let _this = this;
                await getLoanProjectInfo({
                    "loanNo": this.$route.query.loanNo
                }).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    console.log(Data);
                    _this.assetsMarkThreeForm = Data.files;
                });
            },
            async subCreateLoan () {
                let _this = this;
                if (window.sessionStorage["createLoan"]) {
                    let createLoanInfo = JSON.parse(window.sessionStorage.getItem("createLoan"));
                    this.createLoan = createLoanInfo;
                }
                await createLoanProject(this.createLoan).then((res) => {
                    if (res.data.state.code === "200") {
                        window.sessionStorage.removeItem("createLoan");
                        _this.$message({
                            message: "成功",
                            type: 'success'
                        });
                        this.$router.push({path: "/asset"});
                    } else {
                        _this.$message({
                            message: res.data.state.message,
                            type: 'error'
                        });
                    }
                });
            }
        }
    };
</script>

<style lang="scss">
  #assetsMarkThree{
      border: 1px solid #eee;
      margin:20px;
      padding:22px 0 0 20px;
      min-width: 1200px;
      box-sizing: border-box;
      overflow: hidden;
      h3{
          margin-bottom: 40px;
          span{
              color: #ccc;
              font-size:14px;
              line-height:1.5;
              margin-left:12px;
          }
      }
      .el-form{
          width: 900px;
          margin-left: 50px;
          .el-form-item{
              margin: 20px 10px;
              .input-file-box{
                  width: 146px;
                  height: 146px;
                  cursor: pointer;
                  position: relative;
                  overflow: hidden;
                  border-radius: 6px;
                  .file-input {
                      width: 146px;
                      height: 146px;
                      position: absolute;
                      left: 0;
                      top:0;
                      opacity: 0;
                      z-index: 999;
                  }
                  .avatar {
                      width: 146px;
                      height: 146px;
                      position: absolute;
                      left: 0;
                      top:0;
                      border: 1px dashed #d9d9d9;
                      border-radius: 6px;
                      box-sizing: border-box;
                      text-align: center;
                      line-height:146px;
                      color: #eee;
                      font-size:40px;
                      font-weight: inherit;
                  }
                  .avatar:hover{
                      border-color: #20a0ff;
                  }
              }
          }
          .btn-box{
              display: block;
              width: 162px;
              margin: 40px auto;
          }
      }
      .assetsMarkThree-ul{
          margin-left: 100px;
          li{
              width: 704px;
              overflow: hidden;
              .item{
                  float: left;
                  height: 100px;
                  line-height: 100px;
                  overflow: hidden;
                  padding: 10px 0;
                  margin-right: 100px;
                  margin-bottom:50px;
                  .left{
                      float: left;
                      width: 100px;
                      height: 100px;
                      font-size:14px;
                      margin:0;
                  }
                  .left:after{
                      content: '*';
                      color: #ff4949;
                      margin-left: 4px;
                  }
                  .right{
                      float: left;
                      border: 1px solid #ccc;
                      width: 150px;
                      height: 100px;
                      position: relative;
                      .p-file{
                          width: 150px;
                          height: 100px;
                          position: absolute;
                          left:0;
                          top:0;
                          text-align: center;
                          margin: 0;
                      }
                      .input-file{
                          width: 150px;
                          height: 100px;
                          position: absolute;
                          left:0;
                          top:0;
                          opacity:0;
                          cursor: pointer;
                      }
                  }
              }
          }
        .el-button-back{
            margin-left:100px;
        }
      }
  }
</style>
